<template>
  <div class="SpeciesStatisticsdetail">
    <div class="tit">
      <span
        class="goback" style="font-size: .2rem;font-weight: 700;">物种统计</span>
      <span style="font-size: .2rem;margin:0 .1rem;">></span>
      <span style="font-size: .2rem;">详情</span>

      <div style="position: absolute;right: .2rem;">
        <el-button @click="goback" size="small">返回</el-button>
      </div>

    </div>

    <!--主要容器-->
    <div class="aut_main">
      <div class="aut_main_l" style="flex: 7;overflow: hidden">
        <!--大图-->
        <div class="big_image">
          <!--图片-->
          <img class="big_image_img"
               id="pcr"
               :src="obj.accessorySrc" alt="">
          <!--图片-->
          <!--文字-->
          <div class="big_image_txt">
            <span>拍摄时间：{{obj.shootingTime}}</span>
            &nbsp; &nbsp; &nbsp;
            <span>经度：{{obj.lon}}</span>
            &nbsp; &nbsp; &nbsp;
            <span>纬度：{{obj.lat}}</span>
          </div>
          <!--文字-->
        </div>
        <!--大图-->
        <!--小图-->
        <div class="small_image">
          <ul class="viewpager_container">
            <li v-for="(il,index) in list"
                @click="movement(il,index)"
                :style="il.color=='1'?'border: 2px solid #00CF3C;':'border: 1px solid #303133;'">
              <img :src="iscloud(il.accessorySrc)" alt="">
            </li>
          </ul>
        </div>
        <!--小图-->
      </div>
      <div class="aut_main_r" style="flex: 3">
        <div class="aut_main_r_t">
          <span>物种名称：</span>
          <span>{{filter(obj.speciesName)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>鉴定人：</span>
          <span>{{filter(obj.identifyPeople)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>拍摄时间：</span>
          <span>{{filter(obj.shootingTime)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>温度：</span>
          <span>{{filter(obj.temperature)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>照片编号：</span>
          <span>{{filter(obj.imageName)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>照片质量：</span>
          <span>{{filter(obj.imageQuality)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>物种数量：</span>
          <span>{{filter(obj.animalNum)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>物种类别：</span>
          <span>{{filter(obj.objType)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>物种性别：</span>
          <span>{{filter(obj.speciesGender)}}</span>
        </div>
        <div class="aut_main_r_t">
          <span>备注：</span>
          <span>{{filter(obj.remark)}}</span>
        </div>

      </div>
    </div>
    <!--主要容器-->
  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'
  export default{
    data(){
      return {
        animalName: "",
        areaId: "",
        timeStr: "",
        bigimage: "",
        list: [],
        obj: {
          accessorySrc: "",
          shootingTime: "",
          lon: "",
          lat: ""
        }
      }
    },
    created(){
      this.areaId = sessionStorage.getItem('areaId');
      this.animalName = this.$route.query.name;
      this.timeStr = this.$route.query.time;
      this.getanimalDetail();
    },
    mounted(){

    },
    methods: {
      filter(value) {
        if (value == "" || value == null) {
          return "暂无"
        } else {
          return value
        }
      },
      //运动
      movement(t, i){
        this.list.forEach(e => {
          e.color = '0'
        });
        t.color = '1';
        this.obj = t;
        var target = $('.viewpager_container');
        if (i >= 3) {
          target.stop().animate({left: -(i - 2) * 1.6 + "rem"}, 500)
        } else {
          target.stop().animate({left: 0}, 500)
        }

        var vm = this;
        $(function () {
          var maxWidth = $('.big_image').width();
          var maxHeight = $('.big_image').height();
          var path = $('#pcr').attr('src');
//          if (vm.isMp4(vm.Pictures) == '照片') {
          vm.AutoSize(path, maxWidth, maxHeight);
//          }
        })
      },
      //图片处理
      iscloud(p) {
        if (p.split(":")[0] == 'http') {
          return p + '@oosImage|100h'
        }
        if (p.split(":")[0] == 'https') {
          return p + '?x-amz-process=image/resize,h_100,m_lfit'
        }
        return '/iapi' + p

      },
      AutoSize(Img, maxWidth, maxHeight) {
        var image = new Image();
        image.src = Img;
        image.onload = function () {
          if (image.width < maxWidth && image.height < maxHeight) {
            $("#pcr").css({width: image.width, height: image.height})
          } else {
            if (maxWidth / maxHeight <= image.width / image.height) {
              $("#pcr").animate({width: maxWidth, height: maxWidth * (image.height / image.width)}, 'fast');
            } else {
              $("#pcr").animate({width: maxHeight * (image.width / image.height), height: maxHeight}, 'fast');
            }
          }
        }
      },
      getanimalDetail(){
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.animalDetail, {
            animalName: vm.animalName,
            areaId: vm.areaId,
            timeStr: vm.timeStr
          })
          if (res.data.length > 0) {
            let w = res.data.length * 1.6;
            $('.viewpager_container').css("width", w + "rem");
            res.data.forEach(e => {
              e['color'] = "0"
            })
            res.data[0].color = "1";
            vm.list = res.data;
            vm.obj = res.data[0];
          }



        })()
      },
      goback(){
        this.$router.push('/SpeciesStatistics');
      },
    }
  }
</script>
<style scoped>
  @import "../../static/css/SpeciesStatisticsdetail.css";
</style>
